<template>
	
	<view class="wrap">
		
	
		<view class="login-box">
			<view class="login-inner">
				
				<view class="user-box">
					 <view   class="label">对方账户</view>
				  <input  type="text" v-model="other_phone" placeholder="请输入对方账户">
				 
				</view>
				
				
				<view class="user-box">
					 <view   class="label">转账类型</view>
					<picker @change="bindPickerChange"  :range="selarray">
					 	{{selName}}					
					</picker>
				 
				 
				</view>
				<view class="user-box">
					 <view   class="label">账户余额</view>
				  <view class="balance">
					  {{balance}}
				  </view>
				 
				</view>
				<view class="user-box">
					 <view   class="label">转账数量</view>
				  <input  type="text" v-model="number" placeholder="请输入转账数量">
				 
				</view>
				<view class="sub-btn" @click="bottomsub">
					确认提交
				</view>
			</view>
		</view>
		<paypass ref="yspay" @cancel="cancelpay" @submit="submitpay"></paypass>
	</view>
</template>

<script>
	import paypass from "@/components/ys-paypass/ys-paypass.vue";
	export default {
		components:{
			paypass
		},
		data() {
			return {
				balance:'',
				selName:'',
				selarray:[],
				code:'',
				other_phone: '',
				pwd:'',
				pageData:[],
				number:''
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			submitpay(ex){
				this.loginClick(ex.value)
			},
			bottomsub(){
				if(this.other_phone==''){
					uni.showToast({
					    title: '请输入对方账户',
					    duration:4000,
						icon:'none'
					});
					return
				}
				if(this.number==''){
					uni.showToast({
					    title: '请输入转账数量',
					    duration:4000,
						icon:'none'
					});
					return
				}
				this.$refs.yspay.show();
			},
			bindPickerChange(e){
				
				this.selName=this.selarray[e.detail.value]
				this.balance=this.pageData.filter(item=>{
					return item.name==this.selName
				})[0].balance
			},
			getList(){
				let that=this
				that.apiget('/api/user/get_balance').then(res => {
					if(res.Code==10200){
						that.pageData=res.Data
						that.selarray=res.Data.map(item=>{
							return item.name
						})
						that.selName=that.selarray[0]
						this.balance=this.pageData.filter(item=>{
							return item.name==this.selName
						})[0].balance
					}
					
				}).catch(err=>{
					console.log(err)
				});
			},
			loginClick(pwd){
				
				
				let that=this
				
				that.apipost('/api/user/transfer',{
					other_phone:that.other_phone,
					number:that.number,
					type:this.pageData.filter(item=>{
						return item.name==this.selName
					})[0].type,
					pwd
				},true).then(res => {
					if(res.Code==10200){
						uni.showToast({
						    title: res.Message,
						    duration:4000,
							icon:'none'
						});
					}
					
				}).catch(err=>{
					console.log(err)
				});
			},
			switchpage(path){
				if(path){
					uni.switchTab({
					    url: '/pages/index/index'
					});
				}else{
					uni.showToast({
					    title: '暂未开放',
					    duration:4000,
						icon:'none'
					});
				}
			},
			enterpage(path){
				
				if(path){
					
					uni.navigateTo({
					    url: path
					});
				}else{
					uni.showToast({
					    title: '暂未开放',
					    duration:4000,
						icon:'none'
					});
				}
			}
		}
	}
</script>

<style>
	.balance{
		display:flex;
		align-items:center;
		height:100%;
	}
uni-picker{
	display:flex;
	align-items:center;
	height:100%;
}
.code-wrap{
		padding-bottom:4rpx;
		display:flex;
		margin-top:32rpx;
		align-items: center;
	}
	.code-wrap .label-{
		background-size: auto 60%;
		height:46rpx;
		margin-right:6rpx;
	}
	.code-wrap input{
		color:#fff;
		height:100%;
		/* box-sizing: border-box; */
	}
	.code-wrap .right{
		background:#fff;
	}
	.wrap{
		box-sizing: border-box;
		padding-top:40rpx;
		height:100%;
		overflow: hidden;
		background:#f0f0f0;
		background-size:100% 100%;
	}
	

	
	.sub-btn{
		height:85rpx;
		color:#fff;
		display:flex;
		justify-content: center;
		align-items: center;
		border-radius:8rpx;
		margin:0 40rpx;
		
		background:#f9436b;
		
	}
	.tip-btn{
		display:flex;
		justify-content: space-between;
		color:#6e8add;
		font-size:24rpx;
		margin:0 60rpx;
		
		padding:8rpx 0 42rpx 0;
		
	}
	.login-box .title{
		color:#fff;
		padding:48rpx 0 44rpx 0;
		text-align:center;
		font-size:50rpx;
	}
	.logo{
		width:280rpx;
		height:280rpx;
		margin:0 auto;
		margin-top:168rpx;
		margin-bottom:93rpx;
	}
	.login-inner{
		color:#000;
		border-radius:12rpx;
		position:relative;
		
		padding-bottom:40rpx;
	}
	.login-box {
	  box-sizing: border-box;
	  width:700rpx;
	 border-radius:12rpx;
	  margin:0 auto;
	}
	.login-box .user-box {
		border-radius:16rpx;
		display:flex;
	    position: relative;
		border:1rpx solid #a0a0a0;
		height:82rpx;
		margin:0 40rpx;
		margin-bottom:56rpx;
		
	}
	.login-box .user-box input {
	 flex:1;
	  height:82rpx;
	 
	  color: #000;
	  
	  border: none;
	 
	  outline: none;
	  background: transparent;
	}
	.login-box .user-box .label {
		font-weight:bold;
	  justify-content:center;
	  height:82rpx;
	  display:flex;
	  align-items:center;
	  color: #000;
	  width:160rpx;
	}

	
</style>

